@import '@/style/app.scss';

.plugin-config{
  padding-top: 90px;

  .el-menu.el-menu--horizontal{
    justify-content: end;
    border-bottom: solid 1px $color-back;

    .el-menu-item{
      padding-top: 30px;
    }
  }

  .el-tabs--left .el-tabs__header.is-left{
    margin-right: 0;
  }
  .el-tabs--left .el-tabs__nav-wrap.is-left::after{
    width: 0;
  }

  .header{
    width: 100%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: $index - 1;
  }

  &-index{
    padding:30px;

    .form{
      padding:0 30px;
      border-left: 1px $color-back solid;
    }

    .update{
      width: 200px;
      padding-top: 50px;
      margin:0 auto;
    }
  }

  &-tax, &-pay{
    padding:30px;
  }

  &-template{

    .left{
      width: 200px;
      background-color:#fff;
      position: absolute;
  
      .el-menu{
        border: 0
      }
    }
    
    .right{
      width: 100%;
      position: absolute;
      background-color: $color-back;

      .padding{
        padding: 30px 30px 0 230px;
      }
    }

    .list{
      height: 320px;
      cursor: pointer;
      font-size: 14px;
      text-align: center;
      position: relative;

      &:hover{
        span{
          color: $color;
        }
        
        img{
          box-shadow: 0 8px 15px rgba(0, 0, 0, .1);
        }
      }

      &.on{
        img{
          border-color: $color;
        }
      }

      span{
        line-height: 20px;
        margin: 12px 0;
        color: $color-font;
        display:block;
      }

      img{
        height: 220px;
        display:block;
        margin: 0 auto;
        box-shadow: 0 5px 10px rgba(0, 0, 0, .05);
        border: 3px #fff solid;
        border-radius: 6px;
        overflow: hidden;
      }

      i{
        border:1px $color dashed;
        color: $color;
        font-style: normal;
        border-radius: 3px;
        padding: 2px 5px;
        font-size: 12px;
      }
    }
  }
}